<template>
  <div class="dashboard-container">
    <div class="dashboard-content">
      <!-- 左侧主内容区 -->
      <div class="main-content">
        <ToolsModule :tools="tools" />
        <ResourcesModule
            :resources="resources"
            :activeTab="activeTab"
            @update:activeTab="activeTab = $event"
            @open-resource="openResource"
        />
        <ClassModule
            :className="className"
            :activities="activities"
            :activeTabClass="activeTabClass"
            @update:activeTabClass="activeTabClass = $event"
        />
        <CertificatesModule
            :certificates="certificates"
            :activeTabAward="activeTabAward"
            @update:activeTabAward="activeTabAward = $event"
        />
      </div>

      <!-- 右侧侧边栏 -->
      <div class="sidebar">
        <SidebarModule/>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, computed, onMounted} from 'vue';
import {useUserStore} from '@/store/modules/user';
import {ElMessage} from 'element-plus';
import ToolsModule from './components/ToolsModule.vue';
import ResourcesModule from './components/ResourcesModule.vue';
import ClassModule from './components/ClassModule.vue';
import CertificatesModule from './components/CertificatesModule.vue';
import SidebarModule from './components/SidebarModule.vue';

// 导入学生工作台API
import {getStudentDashboard} from '@/api/student';

const userStore = useUserStore();

// 资源相关数据
const activeTab = ref('class');
const activeTabClass = ref('all');
const activeTabAward = ref('personal');

// 响应式数据 - 初始化为空数组
const tools = ref([]);
const resources = ref([]);
const activities = ref([]);
const certificates = ref([]);
const className = ref('');
const loading = ref(false);

// 加载数据
const loadDashboardData = async () => {
  loading.value = true;
  try {
    // 从localStorage获取用户ID
    const userInfoStr = localStorage.getItem('userInfo');
    let userId = '';

    if (userInfoStr) {
      try {
        const userInfo = JSON.parse(userInfoStr);
        userId = userInfo.id || '';
      } catch (error) {
        console.error('解析用户信息失败', error);
      }
    }

    if (!userId) {
      ElMessage.error('无法获取用户信息，请重新登录');
      return;
    }

    const response = await getStudentDashboard(parseInt(userId));

    if (response.success) {
      const data = response.data;

      // 更新数据
      tools.value = data.tools || [];
      resources.value = data.resources || [];
      activities.value = data.classActivities || [];
      certificates.value = data.certificates || [];
      className.value = data.className || '未知班级';

      // 更新用户存储中的班级名称
      if (userStore.userInfo) {
        userStore.userInfo.className = className.value;
      }
    } else {
      ElMessage.error(response.message || '获取工作台数据失败');
      // 调用失败时保持空数组状态
    }
  } catch (error) {
    console.error('加载工作台数据失败:', error);
    ElMessage.error('加载工作台数据失败');
    // 调用失败时保持空数组状态
  } finally {
    loading.value = false;
  }
};

const openResource = (resource) => {
  // 实际应用中这里可以导航到资源详情页
  // router.push(resource.url);
};

const tabs = ref([
  {label: '全部', value: 'all'},
  {label: '通知', value: 'notice'},
  {label: '联系', value: 'contact'},
  {label: '打卡', value: 'checkin'},
  {label: '实践', value: 'practice'}
]);

// 生命周期
onMounted(() => {
  loadDashboardData();
});
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
  height: calc(100vh - 40px);
}

.dashboard-content {
  display: flex;
  gap: 20px;
  min-height: 100%;
}

.main-content {
  flex: 3;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sidebar {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.main-content, .sidebar {
  height: 100%;
}
</style>
